<template>
  <div class="comment-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>评论管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 表格 -->
      <el-table v-loading="loading" :data="commentList" border style="width: 100%">
        <el-table-column align="center" prop="id"  label="#" width="120">
        </el-table-column>
        <el-table-column align="center" prop="title" label="标题" width="400">
        </el-table-column>
        <el-table-column align="center" prop="total_comment_count" label="总评论数" width="120">
        </el-table-column>
        <el-table-column prop="fans_comment_count" align="center" label="粉丝评论数" width="160"> 
        </el-table-column>
         <el-table-column  align="center" label="状态" width="180"> 
             <template slot-scope="scope">
                 <el-tag v-if="scope.row.comment_status">正常</el-tag>
                 <el-tag v-else type="danger">关闭</el-tag>
             </template>
        </el-table-column>
         <el-table-column  align="center" label="操作" width="250"> 
             <template slot-scope="scope">
                  <el-button size="mini" @click="changeComment(scope.row.id, scope.row.comment_status)" v-if="scope.row.comment_status" type="danger" round>关闭评论</el-button>
                  <el-button size="mini" @click="changeComment(scope.row.id, scope.row.comment_status)" v-else type="success" round>打开评论</el-button>
             </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :total="totalCount">
      </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getCommentList, changeCommentStatus } from '@/api/comment/comment.js'
export default {
  name: "CommentIndex",
  data() {
    return {
        queryInfo:{
            page: 1,
            per_page: 10,
            response_type: 'comment'
        },
        commentList: null,
        totalCount: 0 ,
        loading: false
    };
  },

  mounted() {
      this.getCommentData()
  },
  methods: {
     async getCommentData (){
         this.loading = true
         const commentRes = await getCommentList(this.queryInfo)
         const { data:{ results } }  = commentRes
         this.commentList = results
         this.totalCount = commentRes.data.total_count
         this.loading = false
      },
    //   翻页
     handleCurrentChange (currentPage){
         this.queryInfo.page = currentPage
         this.getCommentData()
     },
    //  修改评论状态
     changeComment (id,status){
         if (status){
         this.$confirm('亲，您是否要关闭当前文章评论功能，如果关闭读者将无法对这篇文章进行评论。', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
           const changeRes = await changeCommentStatus(id,status)
            if (changeRes.message === 'OK'){
            this.$message.success('关闭成功')
            this.getCommentData()
            }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消关闭'
          });          
        });
        }else {
          this.$confirm('亲，您是否要打开当前文章评论功能。', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
           const changeRes = await changeCommentStatus(id,status)
           if (changeRes.message === 'OK'){
            this.$message.success('打开成功')
            this.getCommentData()
           }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消打开'
          });          
        });
        }
    }
  },
};
</script>

<style lang="less" scoped>
.pagination{
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>